<template>
  <section class="main">
    <div class="title">
      <span>订单详情</span>
      <div>
        <el-button type="primary" @click="back()">返回</el-button>
        <el-button icon="el-icon-refresh"></el-button>
      </div>
    </div>
    <div class="container">
      <div class="itemBox">
        <div class="line">
          <div>商户名</div>
          <div>{{ merchantinfo.merchantName }}</div>
        </div>
        <div class="line">
          <div>商户号</div>
          <div>{{ merchantinfo.merchantNo }}</div>
        </div>
        <div class="line" v-if="!isCode">
          <div>门店名</div>
          <div>{{ merchantinfo.shopName }}</div>
        </div>
        <div class="line">
          <div>订单号</div>
          <div>
            {{ merchantinfo.outTradeNo }}
            <i
              class="el-icon-copy-document iconmove"
              @click="copyOutTradeNoFun(merchantinfo.outTradeNo)"
              v-clipboard:copy="copyOutTradeNo"
              v-clipboard:success="onCopy"
              v-clipboard:error="onError"
            />
          </div>
        </div>
        <div class="line" v-if="merchantinfo.channelOrderNo">
          <div>渠道订单号</div>
          <div>
            {{ merchantinfo.channelOrderNo }}
            <i
              class="el-icon-copy-document iconmove"
              @click="copyChannelOrderNoFunc(merchantinfo.channelOrderNo)"
              v-clipboard:copy="copyChannelOrderNo"
              v-clipboard:success="onCopy"
              v-clipboard:error="onError"
            />
          </div>
        </div>
      </div>
      <div class="itemBox">
        <div class="line">
          <div>渠道商户号</div>
          <div>{{ merchantinfo.mchId }}</div>
        </div>
        <div class="line" v-if="!isCode">
          <div>终端号</div>
          <div>{{ merchantinfo.terminalNo }}</div>
        </div>
        <div class="line" v-if="!isCode">
          <div>门店号</div>
          <div>{{ merchantinfo.shopCode }}</div>
        </div>
        <div class="line">
          <div>流水号</div>
          <div>
            {{ merchantinfo.payTraceNo }}
            <i
              class="el-icon-copy-document iconmove"
              @click="copyPayTraceNoFunc(merchantinfo.payTraceNo)"
              v-clipboard:copy="copyPayTraceNo"
              v-clipboard:success="onCopy"
              v-clipboard:error="onError"
            />
          </div>
        </div>

        <div class="line" v-if="merchantinfo.channelTradeNo">
          <div>官方订单号</div>
          <div>
            {{ merchantinfo.channelTradeNo }}
            <i
              class="el-icon-copy-document iconmove"
              @click="copyChannelTradeNoFunc(merchantinfo.channelTradeNo)"
              v-clipboard:copy="copyChannelTradeNo"
              v-clipboard:success="onCopy"
              v-clipboard:error="onError"
            />
          </div>
        </div>
      </div>
    </div>

    <div class="title">
      <span>支付信息</span>
    </div>
    <div class="container">
      <div class="itemBox">
        <div class="line">
          <div>支付类型</div>
          <div>{{ merchantinfo.typeName }}</div>
        </div>
        <div class="line">
          <div>交易金额</div>
          <div>{{ merchantinfo.totalFee }}</div>
        </div>
        <div class="line">
          <div>商家实收金额</div>
          <div>{{ merchantinfo.balance }}</div>
        </div>
        <div class="line">
          <div>通道类型</div>
          <div>{{ merchantinfo.channelTypeName }}</div>
        </div>
        <div class="line">
          <div>终端交易时间</div>
          <div>{{ merchantinfo.payTime }}</div>
        </div>
        <div class="line">
          <div>结算处理时间</div>
          <div>{{ merchantinfo.settleDate.substring(0, 10) }}</div>
        </div>
      </div>
      <div class="itemBox">
        <div class="line">
          <div>支付方式</div>
          <div>{{ merchantinfo.payModeName }}</div>
        </div>
        <div class="line">
          <div>手续费</div>
          <div>{{ merchantinfo.fee }}</div>
        </div>

        <div class="line">
          <div>{{ merchantinfo.typeName }}用户标识</div>
          <div>{{ merchantinfo.channelUserId }}</div>
        </div>
        <div class="line">
          <div>订单创建时间</div>
          <div>{{ merchantinfo.createTime }}</div>
        </div>
        <div class="line">
          <div>订单描述</div>
          <div>{{ merchantinfo.orderBody }}</div>
        </div>
      </div>
      <div class="itemBox">
        <div class="line">
          <div>支付状态</div>
          <div>
            {{ merchantinfo.payStatusCodeName }}
            <span
              class="red"
              v-if="
                merchantinfo.refundStatus == '01' &&
                merchantinfo.payStatusCode == '1'
              "
              >(有退款)</span
            >
            <el-button
              class="magin"
              type="primary"
              v-if="merchantinfo.payStatusCode == 1"
              @click="tradeNotifys()"
              >补发通知</el-button
            >
          </div>
        </div>
        <div
          class="line"
          v-if="
            merchantinfo.payStatusCode == 2 ||
            merchantinfo.payStatusCode == 6 ||
            merchantinfo.payStatusCode == 12 ||
            merchantinfo.refundStatus == 2
          "
        >
          <div>失败原因</div>
          <div
            v-if="
              merchantinfo.payStatusCode == 2 ||
              merchantinfo.payStatusCode == 6 ||
              merchantinfo.payStatusCode == 12
            "
          >
            {{ merchantinfo.payStatusMsg }}
          </div>
          <div v-else-if="merchantinfo.refundStatus == 2">
            {{ merchantinfo.refundStatusMsg }}
          </div>
        </div>
        <div class="line">
          <div>支付费率</div>
          <div>{{ merchantinfo.rate / 10 }}‰</div>
        </div>
        <div class="line">
          <div>商户优惠</div>
          <div>
            <span v-if="merchantinfo.payStatusCode == 1">{{
              merchantinfo.offerFee
            }}</span>
            <span v-else>0</span>
          </div>
        </div>
        <div class="line">
          <div>是否推送</div>
          <div>{{ merchantinfo.isNotice == 0 ? "未推送" : "已推送" }}</div>
        </div>
        <div class="line" v-if="merchantinfo.endTime">
          <div>支付完成时间</div>
          <div>{{ merchantinfo.endTime }}</div>
        </div>
        <div class="line">
          <div>备注</div>
          <div>{{ merchantinfo.attach }}</div>
        </div>
      </div>
    </div>

    <!-- 商品信息 -->
    <div class="title" v-if="isGoods || isDiscount">
      <span>商品及优惠信息</span>
    </div>
    <div class="container goods-container" v-if="isGoods || isDiscount">
      <div class="itemBox discountBox" v-if="isDiscount">
        <div class="line">
          <div>其他优惠金额</div>
          <div>{{ discountInfo["other_discount"] / 100 || 0 }}</div>
        </div>
        <div class="line">
          <div>商家优惠金额</div>
          <div>{{ discountInfo["mdiscount_amount"] / 100 || 0 }}</div>
        </div>
        <div class="line">
          <div>平台优惠</div>
          <div>{{ discountInfo["discount_amount"] / 100 || 0 }}</div>
        </div>
        <div class="line">
          <div>顾客实付金额</div>
          <div>{{ discountInfo["buyer_pay_amount"] / 100 || 0 }}</div>
        </div>
      </div>
      <div class="discountTable" v-if="isGoods">
        <el-table :data="goodsInfo" style="width: 100%; margin-top: 20px">
          <el-table-column prop="goods_name" label="商品名称">
          </el-table-column>
          <el-table-column prop="goods_id" label="商品编码"> </el-table-column>
          <el-table-column prop="goods_price" label="商品价格（元）">
            <template slot-scope="scope">
              <span style="margin-left: 10px">{{
                scope.row["goods_price"] / 100
              }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="goods_quantity" label="商品数量">
          </el-table-column>
        </el-table>
      </div>
    </div>

    <div
      v-if="
        merchantinfo.payStatusCode == 5 ||
        merchantinfo.payStatusCode == 6 ||
        merchantinfo.payStatusCode == 8
      "
    >
      <div class="title">
        <span>退款信息</span>
      </div>
      <div class="container">
        <div class="itemBox">
          <div class="line">
            <div>原支付订单号</div>
            <div>
              {{ merchantinfo.outRefundNo }}
              <i
                class="el-icon-copy-document iconmove"
                @click="copyoutRefundNoFunc(merchantinfo.outRefundNo)"
                v-clipboard:copy="copyoutRefundNo"
                v-clipboard:success="onCopy"
                v-clipboard:error="onError"
              />
            </div>
          </div>
          <div class="line">
            <div>退款完成时间</div>
            <div>{{ merchantinfo.settleTime }}</div>
          </div>
        </div>
        <div class="itemBox">
          <div class="line">
            <div>退款金额</div>
            <div>{{ merchantinfo.refundFee }}</div>
          </div>
        </div>
        <div class="itemBox">
          <div class="line">
            <div>退款状态</div>
            <div>{{ merchantinfo.payStatusMsg }}</div>
          </div>
        </div>
      </div>
    </div>
    <div
      v-if="
        merchantinfo.payStatusCode != 11 &&
        freezeTable &&
        merchantinfo.freezeOrderNo != ''
      "
      class="tabbox"
    >
      <div class="title">
        <span>冻结订单信息</span>
      </div>
      <div class="container">
        <div class="itemBox">
          <div class="line">
            <div>原支付订单号</div>
            <div>{{ merchantinfo.freezeOrderNo }}</div>
          </div>
          <div class="line">
            <div>冻结时间</div>
            <div>{{ merchantinfo.freezeTime }}</div>
          </div>
        </div>
        <div class="itemBox">
          <div class="line">
            <div>冻结金额</div>
            <div>{{ merchantinfo.freezeAmount }}</div>
          </div>
        </div>
        <div class="itemBox">
          <div class="line">
            <div>冻结状态</div>
            <div>{{ merchantinfo.freezeStatus }}</div>
          </div>
        </div>
      </div>
    </div>
    <div
      class="tabbox"
      v-if="
        merchantinfo.refundStatus == '01' && merchantinfo.payStatusCode == '1'
      "
    >
      <div class="title">
        <span>退款记录</span>
      </div>
      <div class="tableBox">
        <el-table
          ref="multipleTable"
          :data="refundarr"
          tooltip-effect="dark"
          style="width: 100%"
          stripe
          :header-cell-style="tableHeaderColor"
          v-loading="loading"
        >
          <el-table-column
            label="退款时间?退款订单号"
            :render-header="renderheader"
          >
            <template slot-scope="scope">
              <div>{{ scope.row.settleTime }}</div>
              <div>{{ scope.row.outTradeNo }}</div>
            </template>
          </el-table-column>
          <el-table-column prop="typeName" label="订单类型"></el-table-column>
          <el-table-column prop="fee" label="退手续费(元)"></el-table-column>
          <el-table-column
            prop="name"
            label="商户号?商户名"
            :render-header="renderheader"
          >
            <template slot-scope="scope">
              <div>{{ scope.row.merchantNo }}</div>
              <div>{{ scope.row.merchantName }}</div>
            </template>
          </el-table-column>
          <el-table-column
            prop="address"
            label="门店号?门店名"
            :render-header="renderheader"
          >
            <template slot-scope="scope">
              <div>{{ scope.row.shopCode }}</div>
              <div>{{ scope.row.shopName }}</div>
            </template>
          </el-table-column>
          <el-table-column
            prop="address"
            label="退款金额(元)?退款状态"
            :render-header="renderheader"
          >
            <template slot-scope="scope">
              <div>{{ scope.row.refundFee }}</div>
              <div>{{ scope.row.payStatusMsg }}</div>
            </template>
          </el-table-column>
        </el-table>
        <!-- <div class="pagination">
          <el-pagination
            background
            layout="total, sizes, prev, pager, next, jumper"
          ></el-pagination>
        </div>-->
      </div>
    </div>
    <div
      class="tabbox"
      v-if="
        originalTable &&
        merchantinfo.refundStatus != '' &&
        merchantinfo.payStatusCode == '11'
      "
    >
      <div class="title">
        <span>相关订单信息</span>
      </div>
      <div class="tableBox">
        <el-table
          ref="originalRef"
          :data="originalArr"
          tooltip-effect="dark"
          style="width: 100%"
          stripe
          :header-cell-style="tableHeaderColor"
          v-loading="loading"
        >
          <el-table-column
            label="订单时间?订单号"
            :render-header="renderheader"
          >
            <template slot-scope="scope">
              <div>{{ scope.row.settleTime }}</div>
              <div>{{ scope.row.outTradeNo }}</div>
            </template>
          </el-table-column>
          <el-table-column prop="typeName" label="订单类型"></el-table-column>
          <el-table-column prop="fee" label="手续费(元)"></el-table-column>
          <el-table-column
            prop="name"
            label="商户号?商户名"
            :render-header="renderheader"
          >
            <template slot-scope="scope">
              <div>{{ scope.row.merchantNo }}</div>
              <div>{{ scope.row.merchantName }}</div>
            </template>
          </el-table-column>
          <el-table-column
            prop="address"
            label="门店号?门店名"
            :render-header="renderheader"
          >
            <template slot-scope="scope">
              <div>{{ scope.row.shopCode }}</div>
              <div>{{ scope.row.shopName }}</div>
            </template>
          </el-table-column>
          <el-table-column
            prop="address"
            label="订单金额(元)?订单状态"
            :render-header="renderheader"
          >
            <template slot-scope="scope">
              <div v-if="scope.row.payStatusMsg == '支付成功'">
                {{ scope.row.totalFee }}
              </div>
              <div v-else>{{ scope.row.refundFee }}</div>
              <div>{{ scope.row.payStatusMsg }}</div>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>
    <!-- 补发通知 -->
    <el-dialog v-dialogDrag title="补发通知" :visible.sync="bufa" width="45%">
      <div>
        <el-form
          :model="bufaobj"
          status-icon
          label-width="150px"
          class="demo-dynamic"
        >
          <el-form-item :required="true" label="回调地址">
            <el-input
              type="text"
              v-model.trim="bufaobj.notifyUrl"
              autocomplete="off"
            ></el-input>
          </el-form-item>
        </el-form>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="bufa = false">取消</el-button>
        <el-button @click="tradeNotifysok()">确定</el-button>
      </span>
    </el-dialog>
  </section>
</template>

<script>
import {
  tradeget,
  orderlist,
  tradeNotify,
  freezeOrder,
  goodsAndcoupon,
} from "@/api/api";
import { maniOrderDetail } from "@/api/maniaccount/maniaccount";
export default {
  name: "indentdetails",

  data() {
    return {
      copyoutRefundNo: "",
      copyOutTradeNo: "",
      copyChannelOrderNo: "",
      copyChannelTradeNo: "",
      copyPayTraceNo: "",
      bufa: false,
      bufaobj: {
        notifyUrl: "",
      },
      merchantinfo: {
        settleDate: "",
      },
      merchantarr: [],
      refundarr: [],
      loading: true,
      id: "",
      code: "",
      originalTable: false,
      freezeTable: false,
      originalArr: [],
      freezeArr: [],
      orderNum: "",
      goodsInfo: [],
      discountInfo: {},
      isGoods: false,
      isDiscount: false,
      isCode: false,
    };
  },
  created() {
    this.getOrderDetail();
  },
  watch: {
    // 监听路由传参变化
    async $route(item) {
      if (item.path == "/indentdetails") {
        if (item.query.no == undefined) {
          this.isCode = true;
          maniOrderDetail({}, item.query.code).then((res) => {
            if (res.code == 405) {
              sessionStorage.removeItem("token");
              this.$router.push("/login");
            } else {
              this.merchantinfo = res.data;
              if (
                this.merchantinfo.payStatusCode == "1" &&
                this.merchantinfo.refundStatus == "01"
              ) {
                orderlist({ outRefundNo: this.merchantinfo.outTradeNo }).then(
                  (res) => {
                    // console.log(res);
                    if (res.code == 405) {
                      sessionStorage.removeItem("token");
                      this.$router.push("/login");
                    } else {
                      this.refundarr = res.data;
                      console.log(this.refundarr);
                      this.loading = false;
                    }
                  }
                );
              }
            }
          });
        } else {
          this.isCode = false;
          tradeget({}, item.query.no).then((res) => {
            if (res.code == 405) {
              sessionStorage.removeItem("token");
              this.$router.push("/login");
            } else {
              this.merchantinfo = res.data;
              if (
                this.merchantinfo.payStatusCode == "1" &&
                this.merchantinfo.refundStatus == "01"
              ) {
                orderlist({ outRefundNo: this.merchantinfo.outTradeNo }).then(
                  (res) => {
                    // console.log(res);
                    if (res.code == 405) {
                      sessionStorage.removeItem("token");
                      this.$router.push("/login");
                    } else {
                      this.refundarr = res.data;
                      console.log(this.refundarr);
                      this.loading = false;
                    }
                  }
                );
              }
            }
          });
        }
      }
    },
  },
  methods: {
    copyoutRefundNoFunc(item) {
      console.log(item);
      this.copyoutRefundNo = item.replace(/^\s+|\s+$/g, "");
    },
    //复制订单号
    copyOutTradeNoFun(item) {
      console.log("item==", item);
      this.copyOutTradeNo = item.replace(/^\s+|\s+$/g, "");
    },
    //复制渠道订单号
    copyChannelOrderNoFunc(item) {
      this.copyChannelOrderNo = item.replace(/^\s+|\s+$/g, "");
    },
    //复制官方订单号
    copyChannelTradeNoFunc(item) {
      this.copyChannelTradeNo = item.replace(/^\s+|\s+$/g, "");
    },
    //复制流水号
    copyPayTraceNoFunc(item) {
      this.copyPayTraceNo = item.replace(/^\s+|\s+$/g, "");
    },
    onCopy: function (e) {
      this.$message({
        message: "复制成功",
        type: "success",
      });
      console.log("复制成功");
    },
    onError: function (e) {
      this.$message.error("复制失败");
      console.log("复制失败");
    },
    //修改thead 背景色
    tableHeaderColor({ row, column, rowIndex, columnIndex }) {
      if (rowIndex === 0) {
        return "background-color: #EEEDEE;font-weight: 500;font-size:14px;color:#000;";
      }
    },
    renderheader(h, { column, $index }) {
      return h("span", {}, [
        h("span", {}, column.label.split("?")[0]),
        h("br"),
        h("span", {}, column.label.split("?")[1]),
      ]);
    },
    getOrderDetail() {
      if (this.$route.query.code == undefined) {
        tradeget({}, this.$route.query.no).then((res) => {
          if (res.code == 405) {
            sessionStorage.removeItem("token");
            this.$router.push("/login");
          } else {
            this.merchantinfo = res.data;
            if (
              this.merchantinfo.payStatusCode != 5 &&
              this.merchantinfo.payStatusCode != 6 &&
              this.merchantinfo.payStatusCode != 8 &&
              this.merchantinfo.payStatusCode != 2
            ) {
              this.getGoodsAndcoupon();
            }
            // 获取订单前两位判断来是否显示原冻结订单
            this.orderNum = res.data.outTradeNo.slice(0, 2);
            if (this.orderNum == "24" || this.orderNum == "25") {
              this.freezeTable = true;
            }
            this.freezeArr = [{ ...res.data }];
            if (
              this.merchantinfo.payStatusCode == "1" &&
              this.merchantinfo.refundStatus == "01"
            ) {
              orderlist({ outRefundNo: this.merchantinfo.outTradeNo }).then(
                (res) => {
                  // console.log(res);
                  if (res.code == 405) {
                    sessionStorage.removeItem("token");
                    this.$router.push("/login");
                  } else {
                    this.refundarr = res.data;
                    console.log(this.refundarr);
                    this.loading = false;
                  }
                }
              );
            }
            if (
              this.merchantinfo.refundStatus != "" &&
              this.merchantinfo.payStatusCode == "11"
            ) {
              this.getFreezeOrder();
            }
          }
        });
      } else {
        this.isCode = true;
        maniOrderDetail({}, this.$route.query.code).then((res) => {
          if (res.code == 405) {
            sessionStorage.removeItem("token");
            this.$router.push("/login");
          } else {
            this.merchantinfo = res.data;
            if (
              this.merchantinfo.payStatusCode != 5 &&
              this.merchantinfo.payStatusCode != 6 &&
              this.merchantinfo.payStatusCode != 8 &&
              this.merchantinfo.payStatusCode != 2
            ) {
              this.getGoodsAndcoupon();
            }
            // 获取订单前两位判断来是否显示原冻结订单
            this.orderNum = res.data.outTradeNo.slice(0, 2);
            if (this.orderNum == "24" || this.orderNum == "25") {
              this.freezeTable = true;
            }
            this.freezeArr = [{ ...res.data }];
            if (
              this.merchantinfo.payStatusCode == "1" &&
              this.merchantinfo.refundStatus == "01"
            ) {
              orderlist({ outRefundNo: this.merchantinfo.outTradeNo }).then(
                (res) => {
                  // console.log(res);
                  if (res.code == 405) {
                    sessionStorage.removeItem("token");
                    this.$router.push("/login");
                  } else {
                    this.refundarr = res.data;
                    console.log(this.refundarr);
                    this.loading = false;
                  }
                }
              );
            }
            if (
              this.merchantinfo.refundStatus != "" &&
              this.merchantinfo.payStatusCode == "11"
            ) {
              this.getFreezeOrder();
            }
          }
        });
      }
    },
    getFreezeOrder() {
      freezeOrder(this.$route.query.no).then((res) => {
        if (res.code == 405) {
          sessionStorage.removeItem("token");
          this.$router.push("/login");
        } else {
          if (res.message == "冻结订单下无订单数据。") {
            this.loading = false;
            return;
          } else {
            this.originalArr = res.data;
            this.originalTable = true;
            this.loading = false;
          }
        }
      });
    },
    // 查询退款
    orderlist() {
      orderlist({ outRefundNo: this.merchantinfo.outTradeNo }).then((res) => {
        // console.log(res);
        if (res.code == 405) {
          sessionStorage.removeItem("token");
          this.$router.push("/login");
        } else {
          this.refundarr = res.data;
        }
      });
    },
    back() {
      this.$router.back(-1);
    },
    // 打开补发通知
    tradeNotifys() {
      this.bufa = true;
      this.bufaobj.notifyUrl = this.merchantinfo.notifyUrl;
    },
    // 确定补发
    tradeNotifysok() {
      if (this.bufaobj.notifyUrl) {
        tradeNotify({
          out_trade_no: this.merchantinfo.outTradeNo,
          notify_url: this.bufaobj.notifyUrl,
        }).then((res) => {
          // console.log(res);
          if (res.code == 405) {
            sessionStorage.removeItem("token");
            this.$router.push("/login");
          } else {
            if (res.code == 200) {
              this.$message({
                message: res.message,
                type: "success",
              });
              this.bufa = false;
              this.bufaobj.notifyUrl = "";
            } else {
              this.$message.error(res.message);
            }
          }
        });
      } else {
        this.$message.error("清输入回调地址");
      }
    },

    async getGoodsAndcoupon() {
      if (this.$route.query.no != undefined) {
        let res = await goodsAndcoupon(this.$route.query.no);
        if (res.code == 405) {
          sessionStorage.removeItem("token");
          this.$router.push("/login");
        } else {
          if (res.code == 200) {
            console.log(res);
            if (res.message != "没有该订单信息") {
              if (res.data.goodsDetail != "") {
                this.goodsInfo = JSON.parse(res.data.goodsDetail);
                this.isGoods = true;
              }
              if (res.data.couponDetail != "") {
                this.discountInfo = JSON.parse(res.data.couponDetail);
                this.isDiscount = true;
              }
              console.log(this.isGoods);
              console.log(this.isDiscount);
            }
          }
        }
      }
    },
  },
  mounted() {},
};
</script>

<style scoped>
.iconmove {
  cursor: pointer;
}
.title {
  background: #fff;
  padding: 10px;
  font-size: 18px;
  font-weight: 500;
  display: flex;
  justify-content: space-between;
}
.container {
  width: 100%;
  display: flex;
  margin-bottom: 20px;
  box-sizing: border-box;
}
.container .itemBox {
  width: 50%;
}
.container .itemBox .line {
  width: 100%;
  display: flex;
  font-size: 14px;
  line-height: 200%;
}
.container .itemBox .line div:nth-child(1) {
  width: 25%;
  text-align: left;
  word-break: break-all;
}
.container .itemBox .line div:nth-child(2) {
  width: 75%;
  text-align: left;
  color: #888888;
  word-break: break-all;
}
.container .payBox {
  width: 100%;
}
.container .payBox .thead {
  border-bottom: 1px solid #dddddd;
  display: flex;
  padding-top: 15px;
}
.container .payBox .thead span {
  width: 25%;
  text-align: center;
  display: inline-block;
}
.container .payBox .tbody {
  display: flex;
  padding: 15px 0;
}
.container .payBox .tbody div {
  width: 25%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
}
.tabbox {
  width: 100%;
  background: #fff;
  margin-bottom: 20px;
}
.tableBox {
  width: 95%;
  margin: 0 auto;
}
.red {
  color: red;
}
.magin {
  margin-left: 5px;
}
.discountBox {
  display: flex;
}
.container .discountBox .line div:nth-child(1) {
  width: 25%;
}
.container .discountBox {
  width: 100%;
}
.goods-container {
  display: block;
}
</style>
